<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>动画绘制</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200" style="">
        糟糕 你的浏览器 我还搞不懂也？
    </canvas>

    <script src="script/wind/wind-all-0.7.3.js"></script>
    <script>
        let myCanvas = document.getElementById("myCanvas");
        let cxt = myCanvas.getContext("2d");
        let x = 150;
        let y = 150;
        let r = 100;
        let drawAsync = eval(Wind.compile("async", function () {
            cxt.moveTo(x - r, y);
            for (var i = (x - r); i < (x + r + 1); i++) {
                $await(Wind.Async.sleep(10));
                var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);
                cxt.lineTo(i, y + tempY);
                cxt.stroke();
            }
            cxt.moveTo(x-r, y);
            for (i = x - r; i < (x + r + 1); i++){
                $await(Wind.Async.sleep(10));
                tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);
                cxt.lineTo(i, y - tempY);
                cxt.stroke();
            }
        }));
        let task = drawAsync();
        task.start();
        //cxt.moveTo(20, 10);     // 移动到坐标点
        //cxt.lineTo(150, 50);    // 绘制线条到坐标点
        //cxt.lineTo(10, 50);    // 绘制线条到坐标点
        //cxt.lineTo(20, 10);    // 绘制线条到坐标点
        //cxt.stroke();

    </script>
</body>
</html>